iT邦幫忙

2023 iThome 鐵人賽

DAY 13
0
自我挑戰組

從零開始學Web Framework : React篇系列 第 13

Day_13: 輸入正確密碼查看完整圖片

  • 分享至 

  • xImage
  •  
  1. code;要import這js檔案到頁面js中才會生效。
import React, {useState} from "react";
import Image from "next/image";

function ProtectecImage(){
    //用'useState'hook來管理密碼'password'和是否顯示完整圖片'shoeFullImage'的狀態
    const [password, setPassword]=useState('');
    const [showFullImage, setShowFullImage]=useState(false);
    const correctPassword='自定義密碼';
    //用來存正確的密碼,可自定義
    const handlePasswordChange=(e)=>{
        setPassword(e.target.value);
    }; //用於處理密碼輸入的變化
    //用於檢查輸入的密碼是否正確。如果正確將'showFullImage'設為'true'並顯示完整圖片;否則顯示警告消息
    const handleShowImage=()=>{
        if(password===correctPassword){
            setShowFullImage(true);
        }else{
            alert('Please tyr again.');
        }
    }; 
    return(
        <div>
            <h1>Image</h1>
            <input type="password"
                   placeholder="Enter password"
                   value={password}
                   onChange={handlePasswordChange}
            />
            <button onClick={handleShowImage}>Show Image</button>
            {!showFullImage&&(
                <Image src="自定義預覽圖"
                       alt="Preview"
                       width={300}
                       height={200}
                      />
                )}
            {showFullImage&&(
                <Image src="自定義完整圖"
                       alt="Full Image"
                       width={250}
                       height={250}
                />
            )}
        </div>
    );
}
export default ProtectecImage;

2.實作ps是12345
密碼輸入錯誤:


密碼輸入正確:


上一篇
Day_12: 點擊圖片顯示/切換文本
下一篇
Day_14: 選擇圖片上傳並瀏覽
系列文
從零開始學Web Framework : React篇30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言